<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="Cache-Control" content="no-cache">
	<!-- <meta http-equiv="refresh" content="1"> -->
	<title>Document</title>
	<link href="//cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
	<script>
        (function(){
        	setRem();
        	window.addEventListener('orientation' in window?"deviceorientation":"resize",setRem);
        	function setRem(){
	        	var html = document.documentElement;
	            var hWidth = html.getBoundingClientRect().width;
	            html.style.fontSize = hWidth/15+'px';
        	}   
        })()
    </script>
    
	<style>
		* {margin: 0;padding: 0; -webkit-tap-highlight-color: transparent; -webkit-box-sizing: border-box;box-sizing: border-box;}
        body,html{width:100%;overflow: auto;background: #fff;color: #333;}
        img{border:none;vertical-align: middle;}
        body {font-size: 14px;font-family: "MicroSoft YaHei", sans-serif;color: #333;}
        a {color: #333;text-decoration: none;}
        input {border: none;outline: none; -webkit-appearance: none;}
        ul,ol {list-style: none;}
        header{width: 100%;height: 1.7rem;border:1px solid #bfbfbf;border-width: 0 0 1px 0;background-size: 100% 44px;background-color: #fff;clear: both;overflow: hidden;}
        header .back{float:left;width: 10%;height:100%;display: block;}
        header .back span{display: block;width: 60%;height: 60%;background: url(https://st.360buyimg.com/common/commonH_B/images/2015/jd-sprites.png?v=12) no-repeat;-webkit-background-size: 10rem 9rem;margin:.3rem .3rem;
        background-size: 10rem 10rem;background-position: -1.2rem 0;}
        header .menu{float:right;width: 10%;height:100%;}
        header .menu span{display: block;width: 63%; height: 63%;background: url(http://www.qbys.cn/skin/default/mobile/images/personal.png) no-repeat;margin: .3rem .3rem;-webkit-background-size: 100% 100%;
        background-size: 90% 90%;}
		header h2{text-align: center;line-height: 1.7rem;margin:0 auto;font-size:.7rem;}
		#searchbox{width: 100%;height: 2rem;clear:both;}
		#search{width: 90%;height: 1.4rem;clear:both;overflow: auto;margin: .25rem auto;background-color: #eee;border-radius: .2rem;}
		#search .b-null{width: 10%;height: 100%;display: block;float: left;background: url(https://m.360buyimg.com/cms/jfs/t2743/236/297373512/1548/71d75930/570bb79bN99bda5a6.png) no-repeat;background-position:.2rem .3rem;-webkit-background-size: 60%;
		background-size: 60%;}
		#search input{width: 80%;display: block;background-color: #eee;height: 1.4rem;float: left;font-size: .7rem;}
		#headimage{width: 100%;height:5rem;}
		#headimage img{width: 100%;}
		#rowscroll{height: 1rem;line-height: 1rem;font-size: .6rem;text-align: center;}
		section{width: 100%;overflow: hidden;position: relative;}
		section ul{width: 100%;}
		section ul li{height: 10rem;width: 100%;margin-bottom: .1rem;clear: both;padding: .1rem 0rem 0 .2rem;}
		section ul li a{float: left;display: block;width:7rem;margin-right: .4rem;}
		section ul li a:nth-child(even){margin-right:none;}
		section ul li .lr{float: right;}
		section ul li a img{width: 7rem;}
		section ul li a .title{margin-top:.1rem;display:block;font-size:.4rem;overflow:hidden;white-space:overflow;text-overflow:ellipsis;height: 1.5rem;width: 100%;}
		section ul li a .buttom-box{width: 100%;height: 1rem;margin-top:.3rem;clear: both;line-height: 1rem;}
		section ul li a .nowprice{font-size: .7rem;display: block;float: left;color:rgb(226,83,15);}
		.active{border-bottom: 2px solid rgb(119,180,80)}
		section ul li a .buy{font-size: .5rem;display: block;float: right;margin-right: .1rem;height: 100%;width: 2.7rem;background-color: red;color: #fff;text-align: center;border-radius: .2rem;}
		#gotop{width: 2rem;height: 2rem;border-radius: 50%;border: 1px solid #eee;background-color:rgba(0,0,0,0.3);position: fixed;right: .7rem;bottom: 4rem;display: none;}
		#gotop span{display: block;background:url()no-repeat; width: 80%;height: 80%;-webkit-background-size: 70%;
		background-size: 70%;margin:.4rem .4rem;}
		footer{width: 100%;height: 1rem;margin-top:1rem;}
		footer p{font-size: .5rem;color: #666;text-align: center;line-height: 1rem;}
	</style>
	
</head>
<body>
	<header>
		<a class="back" href="http://www.qbys.cn/mobile/index.php?moduleid=16&action=cate">
			<span></span>
		</a>
		<a class="menu" href="http://www.qbys.cn/mobile/index.php?moduleid=2&action=login">
			<span></span>
		</a>
		<h2>新鲜蔬菜</h2>
	</header>
	<div id="searchbox">
		<div id="search">
			<i class="b-null"></i>
			<input type="search" placeholder="秦巴专营">
		</div>
	</div>
	<div id="headimage">
		<a href="###"><img src="http://img18.fn-mart.com/pic/a838133d10e6dc06e2a4/kzqnTT72vnCghMZlj2/19maoaXGExOiXG/CsmRsli-CP6ALT0eAAEgwaW_nEo799.jpg">
		</a>
	</div>
	<div class="swiper-container" id="rowscroll">
      	<div class="swiper-wrapper">
	        <div class="swiper-slide active">
	        	<a href="###">
	        		<p>全部</p>
	        	</a>
	        </div>
	        <div class="swiper-slide">
	        	<a href="###">
	        		<p>有机菜</p>
	        	</a>
	        </div>
	        <div class="swiper-slide">
	        	<a href="###">
	        		<p>叶菜类</p>
	        	</a>
	        </div>
	        <div class="swiper-slide">
	        	<a href="###">
	        		<p>根茎类</p>
	        	</a>
	        </div>
	        <div class="swiper-slide">
	        	<a href="###">
	        		<p>瓜果类</p>
	        	</a>
	        </div>
	        <div class="swiper-slide">
	        	<a href="###">
	        		<p>菌菇类</p>
	        	</a>
	        </div>
	        <div class="swiper-slide">
	        	<a href="###">
	        		<p>豆类</p>
	        	</a>
	        </div>
	        <div class="swiper-slide">
	        	<a href="###">
	        		<p>色拉菜</p>
	        	</a>
	        </div>
	        <div class="swiper-slide">
	        	<a href="###">
	        		<p>豆制品</p>
	        	</a>
	        </div>
	    </div>
    </div>
	<section>
		<ul id="list">
			<li>
				<a href="###" class="ll">
					<img src="http://img01.fn-mart.com/C/item/2015/0124/201501C240000143/_402249255_400x400.jpg.webp">
					<span class="title">食全食美有机番茄400g/盒</span>
					<div class="buttom-box">
						<span class="nowprice">￥949</span>
						
						<span class="buy">加入购物车</span>
					</div>
				</a>
				<a href="###" class="lr">
					<img src="http://img01.fn-mart.com/C/item/2014/1209/201412C090000083/_246775784_400x400.jpg.webp">
					<span class="title">食全食美有机番茄400g/盒</span>
					<div class="buttom-box">
						<span class="nowprice">￥1241</span>
						
						<span class="buy">加入购物车</span>
					</div>
				</a>
			</li>
						<li>
				<a href="###" class="ll">
					<img src="http://img01.fn-mart.com/C/item/2015/0210/201502C100000980/_377308158_400x400.jpg.webp">
					<span class="title">食全食美有机番茄400g/盒</span>
					<div class="buttom-box">
						<span class="nowprice">￥949</span>
						
						<span class="buy">加入购物车</span>
					</div>
				</a>
				<a href="###" class="lr">
					<img src="http://img17.fn-mart.com/pic/d3ee133a25e62b76c2a5/hT8nTTs2v2LgBMuM32/79eyoGLakieyMG/CsmRslguxQyAWHJCAAMDsXCUaHA389_400x400.jpg.webp">
					<span class="title">食全食美有机番茄400g/盒</span>
					<div class="buttom-box">
						<span class="nowprice">￥1241</span>
						
						<span class="buy">加入购物车</span>
					</div>
				</a>
			</li>
						<li>
				<a href="###" class="ll">
					<img src="http://img01.fn-mart.com/C/item/2015/0109/201501C090000180/_495103016_400x400.jpg.webp">
					<span class="title">食全食美有机番茄400g/盒</span>
					<div class="buttom-box">
						<span class="nowprice">￥949</span>
						
						<span class="buy">加入购物车</span>
					</div>
				</a>
				<a href="###" class="lr">
					<img src="http://img01.fn-mart.com/C/item/2014/1209/201412C090000070/_913500920_400x400.jpg.webp">
					<span class="title">食全食美有机番茄400g/盒</span>
					<div class="buttom-box">
						<span class="nowprice">￥1241</span>
						
						<span class="buy">加入购物车</span>
					</div>
				</a>
			</li>
						<li>
				<a href="###" class="ll">
					<img src="http://img02.fn-mart.com/C/item/2015/0112/201501C120000005/_781991994_400x400.jpg.webp">
					<span class="title">周大福 “猴赛雷” 足金黄金吊坠(工费:58计价) F160760 足金 约3.40g</span>
					<div class="buttom-box">
						<span class="nowprice">￥949</span>
						
						<span class="buy">加入购物车</span>
					</div>
				</a>
				<a href="###" class="lr">
					<img src="http://img02.fn-mart.com/C/item/2014/1209/201412C090000075/null_945336095_400x400.jpg.webp">
					<span class="title">周生生 黄金足金Charme串珠系列皇冠转运珠 83631p 定价</span>
					<div class="buttom-box">
						<span class="nowprice">￥1241</span>
						
						<span class="buy">加入购物车</span>
					</div>
				</a>
			</li>
		</ul>
		<ul id="container"></ul>
		<div id="gotop">
			<span></span>
		</div>

	</section>
	<footer>
		<p>上滑加载更多</p>
	</footer>
	<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script> 
		var mySwiper = new Swiper('.swiper-container', {
		  slidesPerView : 5.5,
		  // centeredSlides : true,
		})
    	$(function(){	

			$(window).bind('scroll',getScrollHeight);

			function getScrollHeight(){		

				if($(window).scrollTop() >= 130){

					$('#gotop').css('display','block'); 

				}else{    

					$('#gotop').css('display','none');    

				}  

			}

			$('#gotop').on('touchend',function(ev){

				$('html,body').scrollTop('0px') ;

				ev.preventDefault();
			});

		});//返回顶部功能

        $(window).bind('scroll',function(){

        	 if ($(document).scrollTop() >= $(document).height() - $(window).height()){

        	 	loadingmore();
        	 }
        });
		function loadingmore(){

		           
		            $.getJSON('1.json',function(data) {
		              
		                if(data){

		                    var htm = "";
		                    
		                    $.each(data,function (index, val) {

		                    	var oLinkL="",
		                    	oLinkR= "";

		                    	if (index%2==0) {
		                    			
		                    		oLinkL = "<li><a href="+val.item+" class='ll'><img src="+val.imgurl+"><span class='title'>"
		                    		+val.title+"</span><div class='buttom-box'><span class='nowprice'>￥"+val.price+"</span><span class='buy'>加入购物车</span></div></a>"
		                    		}

		                    	if (index%2==1)	{
		                    			
		                    		oLinkR = "<a href="+val.item+" class='lr'><img src="+val.imgurl+"><span class='title'>"
		                    		+val.title+"</span><div class='buttom-box'><span class='nowprice'>￥"+val.price+"</span><span class='buy'>加入购物车</span></div></a></li>"
		                    		}  
		                    		
		                    	htm += oLinkL + oLinkR;

		                    	if(index == data.length-1){

		                    		$("footer p").text('没有更多产品了');

		                    	}
		                    })

		                    $('#container').html(htm);

		                }else{

		                    $("footer p").text('没有更多产品了');
		                }
		            });
		        }
		$(window).bind('scroll',function(){

        	 if ($(document).scrollTop() >= $(document).height() - $(window).height()){

        	 	// loadingmore();

        	 }
        });

		$(".swiper-slide").click(function(){
			$(".swiper-slide").removeClass('active');
			$(this).addClass('active');
		})
		
		
    </script>
</body>
</html>